<template>
  <div class="list">
    <scroller :on-refresh="refresh"
              :on-infinite="infinite"
              refresh-layer-color="#4b8bf4"
              loading-layer-color="#ec4949"
              style="top: 3rem;">
      <svg class="spinner" style="stroke: #F15A24;" slot="refresh-spinner" viewBox="0 0 64 64">
        <g stroke-width="7" stroke-linecap="round">
          <line x1="10" x2="10" y1="27.3836" y2="36.4931">
            <animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate>
          </line>
          <line x1="24" x2="24" y1="18.6164" y2="45.3836">
            <animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate>
          </line>
          <line x1="38" x2="38" y1="16.1233" y2="47.8767">
            <animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate>
          </line>
          <line x1="52" x2="52" y1="16" y2="48">
            <animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate>
          </line>
        </g>
      </svg>

      <ul class="mui-table-view mui-table-view-chevron">
        <li class="mui-table-view-cell mui-media" v-for="item in listArr">
          <a href="javascript:;" @click="goDetail(item.id)">
            <img class="mui-media-object mui-pull-left listImg" :src="item.img | beforeImg">
            <i class="mui-media-object mui-pull-right iconfont" :class="item.status | icon_status "></i>
            <div class="mui-media-body">
              {{ item.name }}
              <p class='mui-ellipsis list_desc'>今日发电：{{item.dayPower}}  今日收益：{{ item.daysalary }}</p>
            </div>
          </a>
        </li>
      </ul>

      <svg class="spinner" style="fill: #ec4949;" slot="infinite-spinner" viewBox="0 0 64 64">
        <g>
          <circle cx="16" cy="32" stroke-width="0" r="3">
            <animate attributeName="fill-opacity" dur="750ms" values=".5;.6;.8;1;.8;.6;.5;.5" repeatCount="indefinite"></animate>
            <animate attributeName="r" dur="750ms" values="3;3;4;5;6;5;4;3" repeatCount="indefinite"></animate>
          </circle>
          <circle cx="32" cy="32" stroke-width="0" r="3.09351">
            <animate attributeName="fill-opacity" dur="750ms" values=".5;.5;.6;.8;1;.8;.6;.5" repeatCount="indefinite"></animate>
            <animate attributeName="r" dur="750ms" values="4;3;3;4;5;6;5;4" repeatCount="indefinite"></animate>
          </circle>
          <circle cx="48" cy="32" stroke-width="0" r="4.09351">
            <animate attributeName="fill-opacity" dur="750ms" values=".6;.5;.5;.6;.8;1;.8;.6" repeatCount="indefinite"></animate>
            <animate attributeName="r" dur="750ms" values="5;4;3;3;4;5;6;5" repeatCount="indefinite"></animate>
          </circle>
        </g>
      </svg>
    </scroller>
    <loading v-if="loading"></loading>
  </div>
</template>
<style lang="less" scoped>
  .list{
    background-color: #F4F4F4;
    width: 100%;
    height: 100%;
    padding: 3rem 0 0 0;
    font-family: 'Microsoft YaHei', arial, sans-serif, 'Droid Sans Fallback';
    ul{
      li{
        padding-right: 40px;
        background-color: #fdfdfd;
        &:active{
          background-color: #f5f5f5;
        }
      }
    }
  }
  .list_desc{
    padding-top: .15rem;
  }
  i.icon-gou{
    color: #32B16C;
    font-size: 1rem;
  }
  i.icon-cha{
    color: #EF460B;
    font-size: 1.16rem;
  }
  i.icon-lixian{
    color: #b1b4b3;
    font-size: 1.1rem;
  }
  i.icon-caution{
    color: #d7ba7d;
    font-size: 1.1rem;
  }
  .listImg{
    min-width: 42px;
  }
</style>
<script>
  import {getCookie, setCookie, clearCookie} from '../../config/mUtils'
  import {stationList , pageStation} from '../../service/getData'
  import {mapState} from 'vuex'
  import loading from '../../components/common/loading'
  export default {
    data(){
      return{
        offset:0,
        rows:10,
        total:0,
        listArr:[],
        dataType:0
      }
    },

    mounted(){
      this.$store.state.loading = true;
      let role_name = this.$store.state.role_name;
      switch (role_name) {
        case '终端用户':
          this.dataType = 1;
          break;
        case '安装商':
          this.dataType = 2;
          break;
        default :
          this.dataType = 0;
          break;
      }
      this.getData(0);
    },
    watch:{

    }
    ,
    components:{
      loading
    },

    computed:{
      ...mapState([
        'loading','role_name'
      ]),
    },
    filters: {
      beforeImg: function (value) {
        return 'http://lepv-user.oss-cn-hangzhou.aliyuncs.com/station_system/station/' + value.toString();
      },
      icon_status:function (value) {
        switch (parseInt(value)){
          case 0:
            return 'icon-cha';
          case 1:
            return 'icon-gou';
          case 2:
            return 'icon-lixian';
          case 3:
            return 'icon-caution';
        }
      }
    },
    methods:{
      goDetail(id){
        this.$store.state.loading = true;
        this.$router.push({path:'person' , query:{id:id}})
      },
      async getData(index){
        let email = getCookie('email');
        if(email && email.length > 0){
          let res;
          if(this.dataType === 1){
            res = await stationList(email , this.offset , this.rows);
            if(res.success){
              this.$store.state.loading = false;
              this.total = res.total;
              if(index > 0){
                for(let i = 0 ; i < res.results.length ; i ++){
                  this.listArr.push(res.results[i]);
                }
              }else{
                this.listArr = res.results;
              }
            }
          }else if(this.dataType === 2){
            res = await pageStation(email , this.offset , this.rows);
            if(res.success){
              this.$store.state.loading = false;
              this.total = res.total;
              if(index > 0){
                for(let i = 0 ; i < res.results.length ; i ++){
                  this.listArr.push(res.results[i]);
                }
              }else{
                this.listArr = res.results;
              }
            }
          }else{
            this.$router.push({name:'login'})
          }
        }else{
          this.$router.push({name:'login'})
        }
      },
      refresh(done) {
        let _self = this;
        _self.offset = 0;
        _self.getData(0);
        setTimeout(() => {
          done()
        }, 1500)
      },
      infinite(done) {
        /*if(this.offset >= this.rows){*/
          if (this.offset >= parseInt(this.total)) {
            setTimeout(() => {
              done(true)
            }, 1500)
            return;
          }
          this.offset = parseInt(this.offset) + this.rows;
          this.getData(1);
          setTimeout(() => {
            done()
          }, 1500)
        /*}else{
          done(true)
        }*/
      }
    }
  }

</script>
